'use strict'
$(document).ready(function() {

	var chatRecord = '<div class="comment">'+
				  '  <div class="avatar">'+
				  '    <img src="">'+
				  '  </div>'+
				  '  <div class="content">'+
				  '    <a class="author"></a>'+
				  '    <div class="metadata"><span class="date">Today at 5:42PM</span></div>'+
				  '   <div class="text"></div>'+
				  '  </div>'+
				  ' </div>';
				  
	var yourselfChatRecord = '<div class="comment" style="text-align:right">'+
				  '  <div class="avatar" style="float: right; margin-left: 3px;position: relative;top: -2px;">'+
				  '    <img src="">'+
				  '  </div>'+
				  '  <div class="content">'+
				  '    <div class="metadata"><span class="date"></span></div>'+
				  '    <a class="author"></a>'+
				  '   <div class="text"></div>'+
				  '  </div>'+
				  ' </div>';
				  
				  
				  
	var systemMessage = '<div style="color: #bbbbbb;font-size: 13px;text-align: center;"></div>'
				  
				  
				  
	var $contentContainer = $('#contentContainer');
	var $sendBtn = $('#sendBtn');
	var $content = $('#content');
	var $memberCount = $('#memberCount');
	var $tip = $('#tip');

	var websocket = null;
	

    // 建立链接
    connect();
    
    // 输入框聚焦
    initContentInput();
    
    // 点击按钮发送
    $sendBtn.on('click',function(){
    	sendMessage();
    });
    
    // 输入框回车事件
    $content.keydown(function (e) {
		var curKey = e.which;
		if (curKey == 13) {
			sendMessage();
			return false;
		}
	});
    
    
    // 发送消息
    function sendMessage(){
    	var content = $content.val();
    
    	if(content == null || content == ''){
    		$tip.css('display','');
    		$tip.text('发送内容不能为空！');
    		$content.focus();
    		return;
    	}
    	// 推送消息
    	pushMessage(content);
    	
    	// 发送后，内容清空
    	initContentInput();
    }
   	
   	
   	// 初始化内容输入框
   	function initContentInput(){
   		$content.val('');
    	$content.focus();
    	$tip.css('display','none');
   	}
    
    
    
	
    //链接
    function connect(){
        //判断当前浏览器是否支持WebSocket
        if ('WebSocket'in window) {
            websocket = new WebSocket(websocketBasePath+"/websocket");
        } else {
            alert('Not support websocket')
        }
        
        //连接发生错误的回调方法
        websocket.onerror = function() {
            
        };
        
        //连接成功建立的回调方法
        websocket.onopen = function(event) {
        }
        //接收到消息的回调方法
        websocket.onmessage = function(event) {
        	console.log(event)
        	// 拉取消息
        	pullMessage(event.data);
        }
        //连接关闭的回调方法
        websocket.onclose = function() {
        }
       
    }
    
    // 推送消息
    function pushMessage(message){
    	websocket.send(message);
    }
    
    
    // 接收消息，并展示
    function pullMessage(data){
    	if(data == null){
    		return;
    	}
    	
    	// 将json转换为对象
    	var event = JSON.parse(data);
    	
    	console.log(event)
    	// 接收消息
    	acceptEvent(event);
    	
    	
    	
    }
    
    // 将event转换为dom元素
    function acceptEvent(event){
    	if(event.type === 1){
    		// 普通消息
    		acceptCommonMessageEvent(event.data);
    	}else if(event.type === 2){
    		// 系统消息
    		acceptSystemMessageEvent(event.data)
    	}else if(event.type === 3){
    		// 在线人数通知
    		acceptOnlineMemberMessageEvent(event.data);
    	}
    }
    
    // 普通消息添加到消息列表
    function acceptCommonMessageEvent(messageDto){
    	console.log(messageDto)
    	// 组装显示的元素
    	var $chatRecord = messageDto.isYourself == 1 ? newYourselfChatRecord(messageDto):newChatRecord(messageDto);
    	
    	// 添加到聊天框中
    	$chatRecord.appendTo($contentContainer);
    	
    	// 滚动到最底部
    	scrollDown();
    }
    
    // 系统消息添加到消息列表
    function acceptSystemMessageEvent(content){
    	if(content == null){
    		return;
    	}
    	// 组装显示的元素
    	var $systemMessage = $(systemMessage);
    	
    	var rows = content.split('\n');
    	$(rows).each(function(i,item){
    		var $row = $('<p></p>');
    		$row.html(item);
    		$row.appendTo($systemMessage);
    	});
    	
    	
    	// 添加到聊天框中
    	$systemMessage.appendTo($contentContainer);
    	
    	// 滚动到最底部
    	scrollDown();
    }
    
    
    // 系统消息添加到消息列表
    function acceptOnlineMemberMessageEvent(memberCount){
    	// 组装显示的元素
    	$memberCount.text(memberCount);
    }
    
    
    
    // 新建一个聊天记录
    function newChatRecord(messageDto){
   	    var $chatRecord = $(chatRecord);
   	    console.log($chatRecord.find('img'))
    	$chatRecord.find('img').attr("src",messageDto.clientHeader);
    	$chatRecord.find('.text').text(messageDto.content);
    	$chatRecord.find('.author').text(messageDto.clientName);
    	$chatRecord.find('.date').text(timestampToTime(messageDto.sendTime));
    	return $chatRecord;
    }
    
    // 创建一个自己的聊天记录
    function newYourselfChatRecord(messageDto){
   	    var $yourselfChatRecord = $(yourselfChatRecord);
   	    console.log($yourselfChatRecord.find('img'))
    	$yourselfChatRecord.find('img').attr("src",messageDto.clientHeader);
    	$yourselfChatRecord.find('.text').text(messageDto.content);
    	$yourselfChatRecord.find('.author').text(messageDto.clientName);
    	$yourselfChatRecord.find('.date').text(timestampToTime(messageDto.sendTime));
    	return $yourselfChatRecord;
    }
    
    // 滚动最下方
    function scrollDown(){
    	var $contentContainer = document.getElementById('contentContainer');
        $contentContainer.scrollTop = $contentContainer.scrollHeight;
    }
    
    
    // 时间戳格式化
    function timestampToTime(timestamp) {
    	var strDate  ="";
        var date = new Date();//时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var Y = date.getFullYear() + '-';
        var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
        var D = (date.getDate() < 10 ? '0'+date.getDate() : date.getDate()) + ' ';
        var h = (date.getHours() < 10 ? '0'+date.getHours() : date.getHours()) + ':';
        var m = (date.getMinutes() < 10 ? '0'+date.getMinutes() : date.getMinutes()) + ':';
        var s = (date.getSeconds() < 10 ? '0'+date.getSeconds() : date.getSeconds());
        
        strDate = h+m+s;
        return strDate;
        
    }
    
   
    
    
    
    
    
    
    
    

});